﻿<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"	content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>我的订单</title>
		<link href="${pageContext.request.contextPath}/bettery/css/itao.css"	rel="stylesheet" />
		<link href="${pageContext.request.contextPath}/bettery/js/jquery.confirm/jquery.confirm.css"	rel="stylesheet" />
		<script type="text/javascript"	src="${pageContext.request.contextPath}/dewei/js/jquery.js"></script>
		<script type="text/javascript"	src="${pageContext.request.contextPath}/bettery/js/jquery.confirm/jquery.confirm.js"></script>
		<script type="text/javascript"	src="${pageContext.request.contextPath}/bettery/js/template.js"></script>
		<style type="text/css">
ul.products {
	margin: 0px;
	list-style: none;
	padding: 0px;
}
ul.products li {
	font-size: 12px;
	padding: 3px 5px;
	height: auto;
}
ul.products li:hover {}
ul.products li img,ul.products li .info,ul.products li .oper {
	display: inline-block;
	vertical-align: middle;
}

ul.products li .btn {
	float: left;
	height: 24px;
	margin-top: 2px;
	margin-right: 1px;
	padding: 1px 10px;
	width: 48.5%;
}
.btn-pane {
	
}
.btn-pane .btnBlack {
	width: 45%;
}
.btnBlack {
	text-align: center;
	width: 45%;
	margin-right: 5px
}
</style>
	</head>
	<body>
		<div class='search_bar'>
			订单信息
		</div>
		<div id="contentList" class="col-lg-12">
		</div>
		<div id="ConfirmMsg"></div>
		<script type="text/html" id="test">
<ul class="products">
			{{each list as value i}}
				<li id="li{{value.id}}" class='panel'>
				   <div class='panel-body' style='padding:5px'>
					<img xSrc="{{value.imageUrl}}" src="${pageContext.request.contextPath}/dewei/img/wait.gif" width="95px;" height="96px;" sty>
					<div class='info'>
						<div>订&nbsp;单&nbsp;号：{{value.dingDanUid}}
						</div>
						<div>
							电池品牌：{{value.pinPai}}
						</div>
						<div>
							电池型号：{{value.xingHao}}
						</div>
						<div>
							换购价格：{{value.price}}元
						</div>
						<div>
							更换方式：{{value.changeType}}
						</div>
						
						<div>处理状态：<span id="span{{value.id}}">
							{{if '0' == value.state}}
								已下单
							{{else if '2' == value.state}}
								已指派
							{{else if '4' == value.state}}
								已超期
							{{else if '5' == value.state}}
								已核实
							{{else}}
								处理中
							{{/if}}
							</span>
						</div>
						{{if '附近门店更换' == value.changeType}}
					     </div>
				        <div class='btn-pane'>
					      <a class='btnBlack' onclick='process1({{value.id}},this)' state='{{value.state}}' state2='{{value.state}}' span='完成'>完成</a>
						  <a class='btnBlack' onclick='process2({{value.id}})' >作废</a>
					    </div>
						{{else if '人工上门更换' == value.changeType}}
						</div>
						<div>
							<div>
							联系电话：{{value.lxTel}}
							</div>
							<div>
								<table border="0px;" cellpadding="0px;" cellspacing="0px;" style="font-size: 12px;"><tr><td  style='vertical-align: top;width:60px;' >客户地址：</td><td>{{value.address}}</td></tr></table>
						
							</div>
							<div>
								客户姓名：{{value.kehuName}}
							</div>
							 <div>预约时间：{{value.time}}</div>
							<div  class='btn-pane'>
						      <a class='btnBlack' onclick='process1({{value.id}},this)' state='{{value.state}}' state2='{{value.state}}' span='完成'>完成</a>
							  <a class='btnBlack' onclick='process2({{value.id}})' >作废</a>
						    </div>
					    </div>
						{{else if '附近无网点' == value.changeType}}
						</div>
						<div>
							<div>
								联系电话：{{value.lxTel}}
							</div>
							<div>
								<table border="0px;" cellpadding="0px;" cellspacing="0px;"><tr><td  style='vertical-align: top;width:40px;'>客户地址：</td><td>{{value.address}}</td></tr></table>
							</div>
							<div>
								客户姓名：{{value.kehuName}}
							</div>
							<div class='btn-pane'>
						      <a class='btnBlack' onclick='process1({{value.id}},this)' state='{{value.state}}' state2='{{value.state}}' span='完成'>完成</a>
							  <a class='btnBlack' onclick='process2({{value.id}})' >作废</a>
						    </div>
					    </div>
						{{/if}}
					
					</div>
					
				</li>
			{{/each}}
		</ul>
    </script>
		<script>
var diandansListJson = ${dingdansJson};
	var data = {
		list: diandansListJson
	};
	if(null!=diandansListJson&&diandansListJson.length>0){
		var html = template('test', data);
		document.getElementById('contentList').innerHTML = html;
	}
    </script>
		<script type="text/javascript">
function process1(id, obj) {
	var state = $(obj).attr("state");
	var state2 = $(obj).attr("state2");
	var t = "撤销";
	var s = $("#span" + id).html();
	var s2 = $(obj).attr("span");
	$(obj).attr("span", s);

	if (state == state2) {
		$(obj).attr("state", '1');
		state = '1';
	} else {
		$(obj).attr("state", state2);
		state = state2;
		t = "完成";
	}
	$.confirm( {
		'title' : '提示',
		'message' : '您确定要操作?',
		'buttons' : {
			'确定' : {
				'class' : 'blue',
				'action' : function() {
					$.ajax( {
						url : "processDingdan.do",
						type : 'post',
						data : {
							id : id,
							state : state
						},
						dataType : "json",
						success : function(html) {
							$(obj).html(t);
							$("#span" + id).html(s2);
						}
					});
				}
			},
			'取消' : {
				'class' : 'gray',
				'action' : function() {
				}
			}
		}
	});

}

function process2(id) {
	$.confirm( {
		'title' : '提示',
		'message' : '确定作废，该操作不可恢复?',
		'buttons' : {
			'确定' : {
				'class' : 'blue',
				'action' : function() {
					$.ajax( {
						url : "processDingdan.do",
						type : 'post',
						data : {
							id : id,
							state : '3'
						},
						dataType : "json",
						success : function(data) {
							if (data.success) {
								$("#li" + id).remove();
							} else {
								alert("出错" + data.message);
							}
						}
					});
				}
			},
			'取消' : {
				'class' : 'gray',
				'action' : function() {
				}
			}
		}
	});
}

var scrollLoad = (function(options) {
	var defaults = (arguments.length == 0) ? {
		src : 'xSrc',
		time : 300
	} : {
		src : options.src || 'xSrc',
		time : options.time || 300
	};
	var camelize = function(s) {
		return s.replace(/-(\w)/g, function(strMatch, p1) {
			return p1.toUpperCase();
		});
	};
	this.getStyle = function(element, property) {
		if (arguments.length != 2)
			return false;
		var value = element.style[camelize(property)];
		if (!value) {
			if (document.defaultView && document.defaultView.getComputedStyle) {
				var css = document.defaultView.getComputedStyle(element, null);
				value = css ? css.getPropertyValue(property) : null;
			} else if (element.currentStyle) {
				value = element.currentStyle[camelize(property)];
			}
		}
		return value == 'auto' ? '' : value;
	};
	var _init = function() {
		var offsetPage = window.pageYOffset ? window.pageYOffset
				: window.document.documentElement.scrollTop, offsetWindow = offsetPage
				+ Number(window.innerHeight ? window.innerHeight
						: document.documentElement.clientHeight), docImg = document.images, _len = docImg.length;
		if (!_len)
			return false;
		for ( var i = 0; i < _len; i++) {
			var attrSrc = docImg[i].getAttribute(defaults.src), o = docImg[i], tag = o.nodeName
					.toLowerCase();
			if (o) {
				postPage = o.getBoundingClientRect().top
						+ window.document.documentElement.scrollTop
						+ window.document.body.scrollTop;
				postWindow = postPage
						+ Number(this.getStyle(o, 'height').replace('px', ''));
				if ((postPage > offsetPage && postPage < offsetWindow)
						|| (postWindow > offsetPage && postWindow < offsetWindow)) {
					if (tag === "img" && attrSrc !== null) {
						o.setAttribute("src", attrSrc);
					}
					o = null;
				}
			}
		}
		;
		window.onscroll = function() {
			setTimeout(function() {
				_init();
			}, defaults.time);
		}
	};
	return _init();
});
scrollLoad();
</script>

	</body>
</html>
